<template>
    <app-dialog v-model="show" width="576px" title="修改备注" @open="handleOpen">

        <div class="remark_dialog">
            <div class="list">
                <div class="item">
                    <div class="label">环境名称:</div>
                    <div class="value">
                        {{ state.dialogData.environment_data.base.name }}
                    </div>
                </div>

                <div class="item">
                    <div class="label">备注:</div>
                    <div class="value">
                        <el-input v-model="state.dialogData.environment_data.remark" :rows="4" placeholder="请输入备注"
                            type="textarea" style="width: 100%;" />
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <app-button @click="handleClose">取消</app-button>
            <app-button class="app-button-ptn" style="margin-left: 8px;" @click="clickSubmit()">确定</app-button>
        </template>
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const { store, state } = inject('storejs')
const handleOpen = () => {
}

const handleClose = () => {
    show.value = false
    state.dialogData = {}
}

const clickSubmit = () => {
    let body = JSON.parse(JSON.stringify(state.dialogData.environment_data))
    body.id = state.dialogData.id
    body.number = state.dialogData.number
    body.name = state.dialogData.name
    body.remark = state.dialogData.environment_data.remark ? state.dialogData.environment_data.remark : ''
    
    http.put('/environment/update_environment', body).then((res) => {
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        handleClose()
        store.getEnvironmentList()
    })
}
</script>

<style lang="scss" scoped>
.remark_dialog {
    padding-right: 24px;
    padding-top: 24px;

    .list {
        display: flex;
        flex-direction: column;

        .item {
            display: flex;
            // align-items: center;
            margin-bottom: 24px;

            .label {
                width: 100px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 8px;
                color: #666;
                font-size: 14px;
            }

            .value {
                flex: 1;
                color: #333;
                font-size: 14px;
                min-height: 32px;
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>